{% extends 'index.html' %}
{% block extra-css %}
    <link rel="stylesheet" href="/static/plugins/dropzone/dropzone.css">
{% endblock %}
{% block body %}
    <div class="container">
        <h3>飞凡IT教育|学员报名</h3>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">学员在线报名</h3>
            </div>
            <div class="panel-body">
                <form class="form" method="post" onsubmit="return BeforeFormSubmit(this);">{% csrf_token %}
                    {{ customer_form.errors }}
                    {% for field in customer_form %}
                        <div class="form-group col-lg-6">
                            <label class="col-sm-2 control-label">{{ field.label }}</label>
                            <div class="col-sm-10">
                                {{ field }}
                                <span style="color: red;">{{ field.errors }}</span>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="form-group-lg col-lg-6" style="margin-left: 1px;">
                        <label class="col-sm-2 control-label">报名班级</label>
                        <div class="col-sm-10">
                            {{ enrollment_obj.class_grade }}
                        </div>
                    </div>
                    <div class="form-group-lg col-lg-6" style="float: right;margin-top: -30px;">
                        <label class="col-sm-2 control-label">费用</label>
                        <div class="col-sm-10">
                            {{ enrollment_obj.class_grade.course.price }}
                        </div>
                    </div>
                    <hr style="display:inline-block;margin-top: 100px;border: 2px solid red">
                    <pre style="height: 400px;">{{ enrollment_obj.class_grade.contract_template.content }}</pre>
                    <div class="form-group col-lg-6" style="margin-left: 1px;">
                        <input type="checkbox" name="contract_agree">&nbsp;&nbsp;我已认真阅读 无条件同意
                    </div>
                    <div class="form-group col-lg-6" style="position: relative">
                        <input type="submit" class="btn btn-success" value="提交">
                    </div>
                </form>
                    <div style="position: absolute;margin-top: 100px;">
                        <p>已上传文件列表</p>
                        <ul id="uploaded_files" eid="{{ enrollment_id }}">
                            {% for file in uploaded_files %}
                                <li>{{ file }}<a style="cursor: pointer"><i class="fa fa-times" style="color: red"></i></a></li>
                            {% endfor %}
                        </ul>
                    </div>
                <form id="myAwesomeDropzone" action="{% url 'enrollment_fileupload' enrollment_obj.id %}"
                      class="dropzone"
                      style="margin-top: 100px;margin-left: 400px;">

                    <div class="fallback">
                        <input name="file" type="file" multiple/>
                    </div>
                </form>
            </div>

            <div class="panel-footer">Panel footer</div>
        </div>
    </div>
    <script src="/static/plugins/dropzone/dropzone.js"></script>
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script src="/static/plugins/imagecrop/layer.js"></script>
    <script>
        $(function () {
            bindDeleteUpload();
        });
        function bindDeleteUpload(){
            $('#uploaded_files').on('click','a',function () {
                var $li = $(this).parent();
                var file_name = $(this).parent().text();
                $.ajax({
                    url:'file_delete',
                    type:'POST',
                    data:{'file_name':file_name},
                    dataType:'JSON',
                    success:function (arg) {
                        console.log(arg);
                        if (arg.status){
                            $li.remove();
                            layer.msg('删除成功');
                        } else{
                            alert(arg.message);
                        }
                    }
               })
            })
        }

        Dropzone.options.myAwesomeDropzone = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            maxFiles: 2,
            accept: function (file, done) {
                if (file.name == "justinbieber.jpg") {
                    done("Naha, you don't.");
                }
                else {
                    done();
                }
            }
        };
        window.document.onload = function () {
            // Prevent Dropzone from auto discovering this element:
            Dropzone.options.myAwesomeDropzone = false;
            var myDropzone = new Dropzone("#myAwesomeDropzone");
            myDropzone.on("success", function (file,response) {
                /* Maybe display some more file information on your page */
                console.log('success',file,response);
                var response1 = JSON.parse(response);
                if (!response1.status){
                    alert(response1.err_msg);
                }else{
                    $('#uploaded_files').append('<li>'+file.name+'<a style="cursor: pointer"><i class="fa fa-times" style="color: red"></i></a><li>');
                }
            });
        }();

        function BeforeFormSubmit(self) {
            $(':disabled').removeAttr('disabled');
            if($('#uploaded_files').children().length == 0){
                alert('请上传证件信息！');
                return false
            }
            if (!$('input[name="contract_agree"]').prop('checked')){
                alert('必须勾选协议！');
                return false
            }
        }

    </script>

{% endblock %}